<template>
<div class="wrap">
<xcl-header :page-title="pageTitle" :call-back="callBack" :header-right="headerRight"></xcl-header>
<div class="content">
	 <div class="list-block media-list" style="margin:0">
	    <ul>
	      <li>
	        <a v-link="{name:'ProductDetail',params:{SId:product.psid}}" class="item-link item-content">
	          <div class="item-inner">
	            <div class="row" style="font-size:1em;padding-left:.8em">{{product.pn}}</div>
	            <div class="row"  style="font-size:.7em;color:#999;padding-left:1em">当前净值：{{product.pn1 | formatNumber 4}}</div>
	          </div>
	        </a>
	      </li>
	    </ul>
	  </div>
	<div class="list-block">
	    <ul>
	      <li class="item-content">
	        <div class="item-inner">
	          <div class="item-title">购买日期</div>
	         <div v-if="product.pct>0" class="item-after" >{{product.pct | getLastTimeStr }}</div>
	          <div v-else class="item-after">---</div>
	        </div>
	      </li>
	      <li class="item-content">
	        <div class="item-inner">
	          <div class="item-title">下一购买日</div>
	          <div v-if="product.ed>0" class="item-after" >{{product.ed | getLastTimeStr }}</div>
	          <div v-else class="item-after">---</div>
	        </div>
	      </li>
	      <li class="item-content">
	        <div class="item-inner">
	          <div class="item-title">下一赎回日</div>
	          <div v-if="product.rb1>0" class="item-after" >{{product.rb1 | getLastTimeStr }}</div>
	          <div v-else class="item-after">---</div>
	        </div>
	      </li>
	    </ul>
	</div>
	
	<div class="list-block">
	    <ul>
	      <li class="item-content">
	        <div class="item-media"><i class="icon icon-f7"></i></div>
	        <div class="item-inner" style="margin-left:0">
	          <div class="item-title" >投资金额</div>
	          <div class="item-after">{{product.i | formatMoney }}</div>
	        </div>
	      </li>
	      <li class="item-content">
	        <div class="item-media"><i class="icon icon-f7"></i></div>
	        <div class="item-inner" style="margin-left:0">
	          <div class="item-title">持有份额</div>
	          <div class="item-after">{{product.pn2 | formatNumber 2 }}</div>
	        </div>
	      </li>
	      <li class="item-content">
	        <div class="item-media"><i class="icon icon-f7"></i></div>
	        <div class="item-inner" style="margin-left:0"  >
	          <div class="item-title">累计收益</div>
	          <div class="item-after" v-if="product.ti>=0" style="color:red">{{product.ti | formatMoney }}</div>
	          <div class="item-after" v-else syle="color:green">{{product.ti | formatMoney }}</div>
	        </div>
	      </li>
	       <li class="item-content">
	        <div class="item-media"><i class="icon icon-f7"></i></div>
	        <div class="item-inner" style="margin-left:0">
	          <div class="item-title" >收益率</div>
	          <div class="item-after" v-if="(product.ti+product.pn1*product.pn2-product.i)>=0" style="color:red">{{(product.ti+product.pn1*product.pn2-product.i)/product.i | formatPercent }}</div>
	          <div class="item-after" v-else style="color:green">{{(product.ti+product.pn1*product.pn2-product.i)/product.i | formatPercent }}</div>
	        </div>
	      </li>
	    </ul>
  	</div>
  
</div>

  <xcl-loading :show="loading.show"></xcl-loading>
  </div>
</template>
<script>
import xclHeader from '../components/header.vue'
import xclLoading from '../components/loading.vue'
let UserProxy =  require("../proxy/user_proxy");
let User = new UserProxy();
let ProductProxy =  require("../proxy/product_proxy");
let Product = new ProductProxy();
let MessageProxy =  require("../proxy/message_proxy");
let Message = new MessageProxy();
  export default {
        data (){
            return {
                scroll:true,
                pageTitle:'我的产品',
                headerRight:'',
                user:{
                	nickName:localStorage.nickName,
                	img:'/src/asserts/images/user.png'
                }, 
                account:{
                	totalMoney:0,
                	investMoney:0,
                	totalIncome:0
                }, 
                product:{

                },            
                loading:{
                    show:false
                }
            }
        },
        computed:{
        	allIncome(){
        		 
        	},
        	percentIncome(){

        	}
        },
        methods:{
        	callBack(){
                	window.localStorage.removeItem("token");
                	this.$router.go('/Login');
            },
        	getMyProducts(){
        		var _this = this;
        		var pid = this.$route.params.SId;
        		_this.loading.show = true;
        		Product.getMyProductObj(localStorage.token,pid,(d)=>{
        			if(d.code == 200 && d.results && d.results.length){
        				_this.product = d.results[0];
        			}else if(d.code == 4090){
        				_this.callBack()
        			}
        			_this.loading.show = false;
        		});
        	}
        },
        ready(){
        	this.getMyProducts();
        },
        components:{
           "xclHeader":xclHeader,
           "xclLoading":xclLoading
        }
  }
</script>
<style lang="stylus">
	.message-account
		padding:0 0.3rem
		background-color:red
		border-radius:0.5rem
		font-size:0.5rem
	.product-s2
		text-align:center
		padding:.2em
		width 100%
		-webkit-box-flex 1

</style>